*,
view {
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 100%;
}

.container {
  padding: 15px;
}

.modal-container {
  max-height: 80vh;
  overflow: auto;
  padding: 15px;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

page,
.primary-bg {
  background-color: $color-primary-bg;
  color: $color-primary-text;
  font-size: $font-size-base;
}

.primary-bg-text {
  color: $color-primary-bg-text;
}

.primary-title {
  color: $color-primary-title;
}

.primary-text {
  color: $color-primary-text;
}

.modal-bg {
  background-color: $color-primary-modal-bg;
  color: $color-primary-grey-text;
}

.primary-grey-text {
  color: $color-primary-grey-text;
}

.primary-box {
  background: $color-primary-box;
  box-shadow: $color-primary-shadow;
  border-radius: 5px;
  padding: 10px;
}

.color-gold {
  color: $gold;
}

.gold-background {
  background: linear-gradient(180deg, #ffedcb, #f1c99a);
}

.border-bottom {
  @include border-bottom;
}

.gold-btn {
  background: $color-gold-bg;
  color: $color-primary-bg;
}

.tui-gold-outline {
  color: $gold !important;
  background: transparent;
}

.tui-gold-outline::after {
  border: 1px solid $gold !important;
}

.link-content {
  @include is-flex(row, space-between, flex-end, nowrap);
  margin-bottom: 15px;
  .link-title {
    font-size: $font-size-lg;
    font-weight: bold;
  }
  .link-right {
    @include is-flex(row, flex-end, center, nowrap);
    font-size: $font-size-xxs;
    color: $color-primary-grey-text;
    &.arrow-right::after {
      border-color: $color-primary-grey-text;
    }
  }
}

// 商品类目选中该类目菜品后的小圆点统计图标
.select-number {
  position: absolute;
  right: -2px;
  top: -10px;
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 10px;
  background-color: $color-primary-modal-bg;
  color: $gold;
  text-align: center;
  border-radius: 50%;
  // box-shadow: 1px 3px 6px #333333;
}

.font-weight-bold {
  font-weight: bold;
}
